<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <title>Vegefoods - Free Bootstrap 4 Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
<!--    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800&display=swap" rel="stylesheet">-->
<!--    <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&display=swap" rel="stylesheet">-->
<!--    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700&display=swap" rel="stylesheet">-->

    <link rel="stylesheet" th:href="@{/css/open-iconic-bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/css/owl.theme.default.min.css}">
    <link rel="stylesheet" th:href="@{/css/magnific-popup-1.css}">
    <link rel="stylesheet" th:href="@{/css/aos.css}">
    <link rel="stylesheet" th:href="@{/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-datepicker.css}">
    <link rel="stylesheet" th:href="@{/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/css/flaticon.css}">
    <link rel="stylesheet" th:href="@{/css/icomoon.css}">
    <link rel="stylesheet" th:href="@{/css/style-2.css}">

	  <!-- Css Styles -->
	  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
<!--	  <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" type="text/css">-->
	  <link rel="stylesheet" th:href="@{/css/elegant-icons.css}" type="text/css">
<!--	  <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}" type="text/css">-->
<!--	  <link rel="stylesheet" th:href="@{/css/magnific-popup.css}" type="text/css">-->
<!--	  <link rel="stylesheet" th:href="@{/css/slicknav.min.css}" type="text/css">-->
	  <link rel="stylesheet" th:href="@{/css/style-1.css}" type="text/css">

  </head>
  <body class="goto-here">


	<div th:replace="~{comm/common::header}"/>

    <section class="ftco-section">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-6 mb-5 ftco-animate"
					 style="border-style: outset;border-color: #e08690;border-width: 8px">
    				<a th:href="${pic}" class="image-popup">
						<img th:src="${pic}" class="img-fluid" alt="Colorlib Template">
					</a>
    			</div>
    			<div class="col-lg-6 product-details pl-md-5 ftco-animate">
					<th:block th:if="${item!=null}">
    				<h3 th:if="${item.name != null}" th:text="${item.name}">Bell Pepper</h3>
    				<div class="rating d-flex">
							<p class="text-left mr-4">
								<a href="#" class="mr-2">5.0</a>
								<a href="#"><span class="ion-ios-star-outline"></span></a>
								<a href="#"><span class="ion-ios-star-outline"></span></a>
								<a href="#"><span class="ion-ios-star-outline"></span></a>
								<a href="#"><span class="ion-ios-star-outline"></span></a>
								<a href="#"><span class="ion-ios-star-outline"></span></a>
							</p>
						<th:block th:if="${stock!=null}">
							<p class="text-left mr-4">
<!--								<a href="#" class="mr-2" style="color: #000;">100 <span style="color: #bbb;">Rating</span></a>-->
								<a href="#" class="mr-xl-3" style="color: #000;">销量:
									<span th:text="${stock.sales}" style="color: #fa6a6a;">Rating</span></a>
							</p>
							<p class="text-left">
<!--								<a href="#" class="mr-2" style="color: #000;">500 <span style="color: #bbb;">Sold</span></a>-->
								<a href="#" class="mr-lg-3" style="color: #000;">产地:
									<span th:text="${stock.manufacturer}" style="color: #241c1c;">Sold</span></a>
							</p>
						</th:block>
						</div>
    				<p class="price"><span th:text="${item.priceSell}">$120.00</span></p>
    				<p style="color: #721c24" th:text="${item.detail}"></p>
						<div class="row mt-4">
							<div class="col-md-6">
								<div class="form-group d-flex">
		              <div class="select-wrap">
	                  <div class="icon"><span class="ion-ios-arrow-down"></span></div>
	                  <select name="" id="" class="form-control">
	                  	<option value="">在线支付</option>
	                    <option value="">货到付款</option>
<!--	                    <option value="">Large</option>-->
<!--	                    <option value="">Extra Large</option>-->
	                  </select>
	                </div>
		            </div>
							</div>
							<div class="w-100"></div>
							<div class="input-group col-md-6 d-flex mb-3">
	             	<span class="input-group-btn mr-2">
	                	<button type="button" class="quantity-left-minus btn"  data-type="minus" data-field="">
	                   <i class="ion-ios-remove"></i>
	                	</button>
	            		</span>
	             	<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
	             	<span class="input-group-btn ml-2">
	                	<button type="button" class="quantity-right-plus btn" data-type="plus" data-field="">
	                     <i class="ion-ios-add"></i>
	                 </button>
	             	</span>
	          	</div>
	          	<div class="w-100"></div>
	          	<div class="col-md-12">
	          		<p th:text="'剩余: '+${item.inventory}" style="color: #000;">600 kg available</p>
	          		<p th:text="'限购: '+${item.quota}" style="color: #000;">600 kg available</p>
	          	</div>
          	</div>
          	<p><a th:href="@{|/shop/addToCart/${item.id}|}" class="btn btn-black py-3 px-5">加入购物车</a></p>
					</th:block>
    			</div>
    		</div>
    	</div>
    </section>

	<section class="ftco-section">
		<div class="container">
			<div class="row justify-content-center mb-3 pb-3">
				<div class="col-md-12 heading-section text-center ftco-animate">
					<span class="subheading">Products</span>
					<h2 class="mb-4">相关商品</h2>
					<p>下面是为您精心挑选的商品</p>
				</div>
			</div>
		</div>
		<div class="container" >
			<div class="row" >


				<div class="col-md-6 col-lg-3 ftco-animate" th:each="itemType:${typeItem}">
					<div class="product">
						<a class="img-prod"><img class="img-fluid" th:src="${itemType.image}" alt="Colorlib Template">
							<div class="overlay"></div>
						</a>
						<div class="text py-3 pb-4 px-3 text-center">
							<h3><a th:href="@{|/shop/detail/${itemType.id}|}" >[[${itemType.name}]]</a></h3>
							<div class="d-flex">
								<div class="pricing">
									<p class="price"><span class="price-sale">[[${itemType.priceSell}]]</span></p>
								</div>
							</div>

						</div>
					</div>
				</div>



			</div>
		</div>
	</section>

<!--		<section class="ftco-section ftco-no-pt ftco-no-pb py-5 bg-light">-->
<!--      <div class="container py-4">-->
<!--        <div class="row d-flex justify-content-center py-5">-->
<!--          <div class="col-md-6">-->
<!--          	<h2 style="font-size: 22px;" class="mb-0">Subcribe to our Newsletter</h2>-->
<!--          	<span>Get e-mail updates about our latest shops and special offers</span>-->
<!--          </div>-->
<!--          <div class="col-md-6 d-flex align-items-center">-->
<!--            <form action="#" class="subscribe-form">-->
<!--              <div class="form-group d-flex">-->
<!--                <input type="text" class="form-control" placeholder="Enter email address">-->
<!--                <input type="submit" value="Subscribe" class="submit px-3">-->
<!--              </div>-->
<!--            </form>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </section>-->
    <footer class="ftco-footer ftco-section">
      <div class="container">
      	<div class="row">
      		<div class="mouse">
						<a href="#" class="mouse-icon">
							<div class="mouse-wheel"><span class="ion-ios-arrow-up"></span></div>
						</a>
					</div>
      	</div>
        <div class="row mb-5">
          <div class="col-md">
            <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Vegefoods</h2>
              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
              <ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
                <li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
                <li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
                <li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
              </ul>
            </div>
          </div>
          <div class="col-md">
            <div class="ftco-footer-widget mb-4 ml-md-5">
              <h2 class="ftco-heading-2">Menu</h2>
              <ul class="list-unstyled">
                <li><a href="#" class="py-2 d-block">Shop</a></li>
                <li><a href="#" class="py-2 d-block">About</a></li>
                <li><a href="#" class="py-2 d-block">Journal</a></li>
                <li><a href="#" class="py-2 d-block">Contact Us</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-4">
             <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Help</h2>
              <div class="d-flex">
	              <ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
	                <li><a href="#" class="py-2 d-block">Shipping Information</a></li>
	                <li><a href="#" class="py-2 d-block">Returns &amp; Exchange</a></li>
	                <li><a href="#" class="py-2 d-block">Terms &amp; Conditions</a></li>
	                <li><a href="#" class="py-2 d-block">Privacy Policy</a></li>
	              </ul>
	              <ul class="list-unstyled">
	                <li><a href="#" class="py-2 d-block">FAQs</a></li>
	                <li><a href="#" class="py-2 d-block">Contact</a></li>
	              </ul>
	            </div>
            </div>
          </div>
          <div class="col-md">
            <div class="ftco-footer-widget mb-4">
            	<h2 class="ftco-heading-2">Have a Questions?</h2>
            	<div class="block-23 mb-3">
	              <ul>
	                <li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
	                <li><a href="#"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
	                <li><a href="#"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
	              </ul>
	            </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center">

            <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
						  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart color-danger" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
						  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
						</p>
          </div>
        </div>
      </div>
    </footer>
    
  

  <!-- loader -->
<!--	<div th:replace="~{comm/common::preloader}"/>-->
  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>


  <script th:src="@{/js/veg/jquery.min.js}"></script>
  <script th:src="@{/js/veg/jquery-migrate-3.0.1.min.js}"></script>
  <script th:src="@{/js/veg/popper.min.js}"></script>
  <script th:src="@{/js/veg/bootstrap.min.js}"></script>
  <script th:src="@{/js/veg/jquery.easing.1.3.js}"></script>
  <script th:src="@{/js/veg/jquery.waypoints.min.js}"></script>
  <script th:src="@{/js/veg/jquery.stellar.min.js}"></script>
  <script th:src="@{/js/veg/owl.carousel.min.js}"></script>
  <script th:src="@{/js/veg/jquery.magnific-popup.min.js}"></script>
  <script th:src="@{/js/veg/aos.js}"></script>
  <script th:src="@{/js/veg/jquery.animateNumber.min.js}"></script>
  <script th:src="@{/js/veg/bootstrap-datepicker.js}"></script>
  <script th:src="@{/js/veg/scrollax.min.js}"></script>
  <script th:src="@{/js/veg/main.js}"></script>

  <script>

		$(document).ready(function(){

			let res = 0
			$.ajax({
				type:'get',
				url:"/cart/checkAmount",
				async:false,
				success:function(result){
					console.log(result)
					res = result
					$('#cartNum').text(res)
				}});


		var quantitiy=0;
		   $('.quantity-right-plus').click(function(e){
		        
		        // Stop acting like a button
		        e.preventDefault();
		        // Get the field name
		        var quantity = parseInt($('#quantity').val());
		        
		        // If is not undefined
		            
		            $('#quantity').val(quantity + 1);

		          
		            // Increment
		        
		    });

		     $('.quantity-left-minus').click(function(e){
		        // Stop acting like a button
		        e.preventDefault();
		        // Get the field name
		        var quantity = parseInt($('#quantity').val());
		        
		        // If is not undefined
		      
		            // Increment
		            if(quantity>0){
		            $('#quantity').val(quantity - 1);
		            }
		    });
		    
		});
	</script>
    
  </body>
</html>
